﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>
			6种纯css3发散式弹出菜单_点击红色圆圈按钮弹出导航菜单动画 - 代码库
		</title>
		<link href="css/k_menu-style.css" rel="stylesheet" type="text/css" />
		<link href="css/k_menu-demo.css" rel="stylesheet" type="text/css" />
		<link href="css/k_menu-font.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<!--First row left-->
		<nav class="k_menu_1">
			<input
				type="checkbox"
				href="#"
				class="k_menu-open_1"
				name="k_menu-open_1"
				id="k_menu-open_1"
			/>
			<label class="k_menu-open-button" for="k_menu-open_1">
				<span><i class="k_menu_material-icons md-48">add</i></span>
			</label>
			<a href="#" class="k_menu-item" id="k_menu-one">
				<i class="k_menu_material-icons md-30">phone</i>
			</a>
			<a href="#" class="k_menu-item" id="k_menu-two">
				<i class="k_menu_material-icons md-30">chat</i></a
			>
			<a href="#" class="k_menu-item" id="k_menu-three">
				<i class="k_menu_material-icons md-30">email</i>
			</a>
			<a href="#" class="k_menu-item" id="k_menu-four">
				<i class="k_menu_material-icons md-30">textsms</i>
			</a>
		</nav>

		<!--First row middle-->
		<nav class="k_menu_2">
			<input
				type="checkbox"
				href="#"
				class="k_menu-open_2"
				name="k_menu-open_2"
				id="k_menu-open_2"
			/>
			<label class="k_menu-open-button" for="k_menu-open_2">
				<span><i class="k_menu_material-icons md-48">add</i></span>
			</label>
			<a href="#" class="k_menu-item" id="k_menu-one">
				<i class="k_menu_material-icons md-30">access_alarm</i>
			</a>
			<a href="#" class="k_menu-item" id="k_menu-two">
				<i class="k_menu_material-icons md-30">battery_std</i></a
			>
			<a href="#" class="k_menu-item" id="k_menu-three">
				<i class="k_menu_material-icons md-30">bluetooth</i>
			</a>
			<a href="#" class="k_menu-item" id="k_menu-four">
				<i class="k_menu_material-icons md-30">network_cell</i>
			</a>
			<a href="#" class="k_menu-item" id="k_menu-five">
				<i class="k_menu_material-icons md-30">network_wifi</i></a
			>
			<a href="#" class="k_menu-item" id="k_menu-six">
				<i class="k_menu_material-icons md-30">airplanemode_active</i>
			</a>
		</nav>

		<!--First row right-->
		<nav class="k_menu_3">
			<input
				type="checkbox"
				href="#"
				class="k_menu-open_3"
				name="k_menu-open_3"
				id="k_menu-open_3"
			/>
			<label class="k_menu-open-button" for="k_menu-open_3">
				<span><i class="k_menu_material-icons md-48">add</i></span>
			</label>
			<a href="#" class="k_menu-item" id="k_menu-one">
				<i class="k_menu_material-icons md-30">add_a_photo</i>
			</a>
			<a href="#" class="k_menu-item" id="k_menu-two">
				<i class="k_menu_material-icons md-30">brush</i></a
			>
			<a href="#" class="k_menu-item" id="k_menu-three">
				<i class="k_menu_material-icons md-30">color_lens</i>
			</a>
			<a href="#" class="k_menu-item" id="k_menu-four">
				<i class="k_menu_material-icons md-30">crop</i>
			</a>
			<a href="#" class="k_menu-item" id="k_menu-five">
				<i class="k_menu_material-icons md-30">transform</i></a
			>
			<a href="#" class="k_menu-item" id="k_menu-six">
				<i class="k_menu_material-icons md-30">filter_hdr</i>
			</a>
		</nav>

		<!--Second row left-->
		<nav class="k_menu_4">
			<input
				type="checkbox"
				href="#"
				class="k_menu-open_4"
				name="k_menu-open_4"
				id="k_menu-open_4"
			/>
			<label class="k_menu-open-button" for="k_menu-open_4">
				<span><i class="k_menu_material-icons md-48">menu</i></span>
			</label>
			<a href="#" class="k_menu-item" id="k_menu-one">
				<i class="k_menu_material-icons md-30">share</i>
			</a>
			<a href="#" class="k_menu-item" id="k_menu-two">
				<i class="k_menu_material-icons md-30">settings</i></a
			>
			<a href="#" class="k_menu-item" id="k_menu-three">
				<i class="k_menu_material-icons md-30">home</i>
			</a>
			<a href="#" class="k_menu-item" id="k_menu-four">
				<i class="k_menu_material-icons md-30">delete</i>
			</a>
		</nav>

		<!--Second row middle-->
		<nav class="k_menu_5">
			<input
				type="checkbox"
				href="#"
				class="k_menu-open_5"
				name="k_menu-open_5"
				id="k_menu-open_5"
			/>
			<label class="k_menu-open-button" for="k_menu-open_5">
				<span><i class="k_menu_material-icons md-48">menu</i></span>
			</label>
			<a href="#" class="k_menu-item" id="k_menu-one">
				<i class="k_menu_material-icons md-30">insert_emoticon</i>
			</a>
			<a href="#" class="k_menu-item" id="k_menu-two">
				<i class="k_menu_material-icons md-30">insert_drive_file</i></a
			>
			<a href="#" class="k_menu-item" id="k_menu-three">
				<i class="k_menu_material-icons md-30">insert_photo</i>
			</a>
			<a href="#" class="k_menu-item" id="k_menu-four">
				<i class="k_menu_material-icons md-30">insert_comment</i>
			</a>
		</nav>

		<!--Second row right-->
		<nav class="k_menu_6">
			<input
				type="checkbox"
				href="#"
				class="k_menu-open_6"
				name="k_menu-open_6"
				id="k_menu-open_6"
			/>
			<label class="k_menu-open-button" for="k_menu-open_6">
				<span><i class="k_menu_material-icons md-48">menu</i></span>
			</label>
			<a href="#" class="k_menu-item" id="k_menu-one">
				<i class="k_menu_material-icons md-30">stop</i>
			</a>
			<a href="#" class="k_menu-item" id="k_menu-two">
				<i class="k_menu_material-icons md-30">play_arrow</i></a
			>
			<a href="#" class="k_menu-item" id="k_menu-three">
				<i class="k_menu_material-icons md-30">fast_forward</i>
			</a>
			<a href="#" class="k_menu-item" id="k_menu-four">
				<i class="k_menu_material-icons md-30">fast_rewind</i>
			</a>
			<a href="#" class="k_menu-item" id="k_menu-five">
				<i class="k_menu_material-icons md-30">skip_next</i>
			</a>
			<a href="#" class="k_menu-item" id="k_menu-six">
				<i class="k_menu_material-icons md-30">skip_previous</i>
			</a>
		</nav>
	</body>
</html>
